{extend name='./layout/_content_open'}

{block name='content_open'}
<div class="panel panel-success">
    <div class="panel-body">
        <div class="">
            <!-- 工具栏 -->
            <div id="toolbar">
                <div class="btn-group">
                    {if in_array('/sys/user/add',session('loginUserPermissions'))}
                    <button type="button" class="btn btn-success" onclick="view.add();">
                        <i class="glyphicon glyphicon-plus"></i>添加
                    </button>
                    {/if}
                    {if in_array('/sys/user/edit',session('loginUserPermissions'))}
                    <button type="button" class="btn btn-warning" onclick="view.edit();">
                        <i class="glyphicon glyphicon-edit"></i>编辑
                    </button>
                    {/if}
                    {if in_array('/sys/user/delete',session('loginUserPermissions'))}
                    <button type="button" class="btn btn-danger" onclick="view.delete();">
                        <i class="glyphicon glyphicon-remove"></i>删除
                    </button>
                    {/if}
                </div>
                <select id="role_id" name="role_id" class="form-control"
                        style="width: auto;display: inline;    vertical-align: middle;" onchange="view.change_role();">
                    <option value="">-- 请选择角色 --</option>
                    {foreach($roles as $role)}
                    <option value="{$role->id}">-- {$role->name} --</option>
                    {/foreach}
                </select>
            </div>

            <!-- 表格主体-->
            <div class="table-responsive">
                <table id="table">

                </table>
            </div>
            <!-- 表格数据处理（未完待续） -->
            <script type="text/javascript">
                $(function () {
                    view.init();
                });

                var view = {
                    layerIndex:0,
                    table: null,//表格对象
                    dataUrl: "{:url('/sys/user/index')}",//数据加载地址
                    addUrl: "{:url('/sys/user/add')}",
                    editUrl: "{:url('/sys/user/edit')}",//菜单编辑地址
                    delUrl: "{:url('/sys/user/delete')}",//删除数据地址
                    selectedData: null,//选中的数据,
                    id: 0,//操作数据的主键
                    defaultColumns: function () {
                        //表头数据列
                        return [
                            {checkbox: true, printIgnore: true},
                            {field: 'name', title: '用户名', align: 'center', filterControl: 'input'},
                            {field: 'nick', title: '昵称', align: 'center', filterControl: 'input'},
                            {field: 'email', title: '电子邮件', align: 'center', filterControl: 'input'},
                            {
                                field: 'birthday',
                                title: '出生日期',
                                align: 'center',
                                sortable: true,
                                formatter: function (arg) {
                                    return arg.slice(0, 10);
                                }
                            },
                            {field: 'address', title: '地址', align: 'center', visible: false},
                            {
                                field: 'create_time', title: '创建时间', align: 'center', sortable: true
                            },
                            {
                                field: 'update_time', title: '修改时间', align: 'center', sortable: true
                            },
                            {field: 'role_name', title: '角色', align: 'center', sortable: true, filterControl: 'select'},
                            {
                                field: 'delete_time', title: '删除时间', align: 'center', visible: true, sortable: true
                            }
                        ];
                    },
                    init: function () {
                        //初始化表格
                        var that = this;
                        this.table = $('#table').bootstrapTable({
                            columns: that.defaultColumns(),
                            classes: 'table table-striped text-center table-hover table-no-left-right-border ',
                            url: that.dataUrl,
                            pageSize: 10,//每页条数,
                            pageList: [2, 10, 20, 50, 100],//条数可选
                            pagination: true,//是否显示分页
                            sidePagination: 'server',//分页方式，默认【client】，客户端分页,数据要求：json数组[{},{},{}]。为server时，数据为：[total:100,rows:[{},{},{}]]，其中total为数据总量，用作分页，rows为数据数组
                            queryParams: function (argument) {
                                if ($('#role_id').val() !== '') {
                                    argument.role_id = $('#role_id').val();
                                }
                                //console.log(argument);
                                return argument;
                            },
                            queryParamsType: 'limit',//默认为【limit】，为【limit】时，请求参数为：limit、offset、order、search、sort。否则为：pageSize, pageNumber, searchText, sortName, sortOrder
                            search: true,//是否显示搜索
                            toolbar: '#toolbar',//工具栏
                            responseHandler: function (argument) {
                                // for (let i = 0; i < argument.rows.length; i++){
                                //     if(argument.rows[i].delete_time != null){
                                //         argument.rows[i].delete_time = '是，删除时间：' + argument.rows[i].delete_time;
                                //     }else{
                                //         argument.rows[i].delete_time = '否';
                                //     }
                                // }
                                //console.log(argument);
                                return argument;
                            },
                            //height: 600,
                            escape: false,//是否对富文本进行转义
                            searchOnEnterKey: false,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法。
                            searchText: '',//初始化搜索文字。
                            searchTimeOut: 500,//毫秒，搜索超时时间
                            trimOnSearch: true,//搜索是否去除两边空格
                            showColumns: true,//是否显示内容列下拉框
                            showRefresh: true,//是否显示刷新按钮
                            clickToSelect: true,//点击行选中
                            sortName: 'id',//默认排序字段
                            showExport: true,//是否显示导出按钮
                            exportTypes: ['excel', 'doc', 'png'],//要导出文件的格式，导出PDF时，中文出现乱码
                            exportOptions: {
                                ignoreColumn: [0],  //忽略某一列的索引
                                fileName: '用户列表',  //文件名称设置
                                worksheetName: 'sheet1',  //表格工作区名称
                                tableName: '用户列表'
                            },//导出数据选项
                            editable: true,//是否可编辑
                            showPrint: true,//是否显示打印按钮

                        });
                        this.init_event();
                    },
                    init_event: function () {
                        //事件
                        this.table.on('load-success.bs.table', function (argument) {
                            //加载成功时触发,其他事件请查看文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6
                            //console.log(argument);
                        });
                    },
                    change_role: function () {
                        this.table.bootstrapTable('selectPage', 1);
                        this.table.bootstrapTable('refresh', {query: {'offset': 0}});
                    },
                    fun: function () {
                        //getSelections:获取选中行
                        //其他方法请查看文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E6%96%B9%E6%B3%95
                        var obj = this.table.bootstrapTable('getSelections');
                        console.log(obj);
                    },
                    add: function () {
                        //wpgaci.goUrl(this.addUrl);
                        var that = this;
                        this.layerIndex = layer.open({
                            type: 2,
                            title: '用户添加',
                            shadeClose: true,
                            shade: 0.8,
                            maxmin: true,
                            area: ['90%', '90%'],
                            content: that.addUrl//iframe的url
                        });
                    },
                    delete: function () {
                        var obj = this.table.bootstrapTable('getSelections');
                        if (obj.length < 1) {
                            layer.msg('请勾选要删除的菜单', {icon: 5});
                            return false;
                        }
                        var ids = "";
                        for (var i = 0; i < obj.length; i++) {
                            ids += obj[i].id + "-";
                        }
                        ids = ids.slice(0, ids.length - 1);
                        layer.confirm('要删除选中的数据？', {
                            btn: ['是', '否'] //按钮
                        }, function () {
                            $.get(view.delUrl + '?ids=' + ids, function (data) {
                                console.log(data);
                                if (data.status) {
                                    view.table.bootstrapTable('refresh');
                                    layer.msg(data.msg, {icon: 1});
                                } else {
                                    layer.msg(data.msg, {icon: 2});
                                }
                            });
                        });
                    },
                    edit: function () {
                        var obj = this.table.bootstrapTable('getSelections');
                        if (obj.length < 1) {
                            layer.msg('请勾选要编辑的用户', {icon: 5});
                            return false;
                        }
                        if (obj.length > 1) {
                            layer.msg('编辑用户只可以勾选一条记录', {icon: 5});
                            return false;
                        }
                        if (obj[0].delete_time != null) {
                            layer.msg('已删除用户不允许修改', {icon: 4});
                            return false;
                        }
                        //wpgaci.goUrl(view.editUrl + '?id=' + obj[0].id);
                        var that = this;
                        this.layerIndex = layer.open({
                            type: 2,
                            title: '用户修改',
                            shadeClose: true,
                            shade: 0.8,
                            maxmin: true,
                            area: ['90%', '90%'],
                            content: that.editUrl + '?id=' + obj[0].id//iframe的url
                        });
                    },
                    close :function () {
                        if(this.layerIndex > 0){
                            layer.close(this.layerIndex);
                        }
                    }
                }
            </script>
        </div>
    </div>
</div>
{/block}